<script lang="ts" setup>
import { get, post, message, loadFile } from '@/utils'
import { FormInstance } from '@arco-design/web-vue'
import useOptions from '@/hooks/useOptions'
import cloneDeep from 'lodash/cloneDeep'
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { options: list } = useOptions({
  api: '/server-shop/sys-seller/seller/role/list',
  fieldName: { label: 'roleName', value: 'id' },
})
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  account: '',
  birthday: '',
  mobile: 0,
  money: 0,
  realName: '',
  email: '',
  password: '',
  sex: 1,
  userTypeName: 'WEB',
  userType: 1,
  name: '',
  againPass: '',
  roleId: [] as string | string[],
  code: '',
  postId: '1123598817738675208', //固定岗位
  deptId: '1123598813738675201', //固定部门
})
const validatePass = (val, cb) => {
  console.log(val, detail.password)
  if (val === detail.password) return cb()
  else return cb('两次密码不一致')
}
const submit = done => {
  formRef.value.validate(err => {
    if (!err) {
      const query: any = cloneDeep(detail)
      query.roleId = query.roleId.join(',')
      query.birthday = query.birthday ? query.birthday + ' 00:00:00' : ''
      console.log('🚀 ~ file: AccountModal.vue:33 ~ formRef.value.validate ~ query:', query)
      const url = props.id ? '/server-shop/sys-seller/seller/account/update' : '/server-shop/sys-seller/seller/account/save'
      //编辑密码字段不能为空处理
      if (props.id) {
        query.password = '1'
      }
      post(
        { url, data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else done(false)
  })
}
const getInfo = () => {
  get({ url: '/server-shop/sys-seller/seller/account/info', data: { id: props.id } }, ({ data }) => {
    data.roleId = data.roleId.split(',')
    data.mobile = Number(data.mobile)
    Object.assign(detail, data)
  })
}
onMounted(() => {
  if (props.id) getInfo()
})
</script>
<template>
  <CModal v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="900px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 16 }">
        <a-collapse expand-icon-position="right" :default-active-key="[1, 2, 3]">
          <a-collapse-item :key="1">
            <template #header> <icon-user /> 基础信息 </template>
            <div class="grid-2">
              <a-form-item label="登录账号" field="account" :rules="[{ required: true, message: '请输入登录账号' }]" :validate-trigger="['change', 'blur']">
                <a-input placeholder="请输入登录账号" v-model="detail.account" />
              </a-form-item>
              <a-form-item label="用户平台">
                <a-input v-model="detail.userTypeName" readonly placeholder="请输入用户平台" />
              </a-form-item>
              <template v-if="!$props.id">
                <a-form-item label="登录密码" field="password" :rules="[{ required: true, message: '请输入登录密码' }]" :validate-trigger="['change', 'blur']">
                  <a-input-password v-model="detail.password" placeholder="请输入登录密码" />
                </a-form-item>
                <a-form-item
                  label="确认密码"
                  field="againPass"
                  :rules="[
                    {
                      required: true,
                      validator: validatePass,
                    },
                  ]"
                  :validate-trigger="['change', 'blur']"
                >
                  <a-input-password v-model="detail.againPass" placeholder="请再次输入密码" />
                </a-form-item>
              </template>
            </div>
          </a-collapse-item>
          <a-collapse-item :key="2">
            <template #header> <icon-exclamation-circle /> 详细信息 </template>
            <div class="grid-2">
              <a-form-item label="用户昵称" field="name" :rules="[{ required: true, message: '请输入用户昵称' }]" :validate-trigger="['change', 'blur']">
                <a-input v-model="detail.name" placeholder="请输入用户昵称" />
              </a-form-item>

              <a-form-item label="手机号码" field="mobile" :rules="[{ required: true, message: '请输入手机号码' }]" :validate-trigger="['change', 'blur']">
                <a-input-number v-model="detail.mobile" placeholder="请输入手机号码" hide-button />
              </a-form-item>
              <a-form-item label="电子邮箱">
                <a-input v-model="detail.email" placeholder="请输入电子邮箱" />
              </a-form-item>
              <a-form-item label="用户性别">
                <a-select
                  v-model="detail.sex"
                  :options="[
                    { label: '男', value: 1 },
                    { label: '女', value: 2 },
                  ]"
                  placeholder="请选择"
                />
              </a-form-item>
              <a-form-item label="用户生日">
                <a-date-picker placeholder="请选择" v-model="detail.birthday" style="width: 100%" />
              </a-form-item>
            </div>
          </a-collapse-item>
          <a-collapse-item :key="3">
            <template #header> <icon-user-group /> 职责信息 </template>
            <div class="grid-2">
              <a-form-item label="所属角色" field="roleId" :rules="[{ required: true, message: '请选择所属角色' }]" :validate-trigger="['change', 'blur']">
                <a-select :options="list" v-model="detail.roleId" placeholder="请选择所属角色" multiple />
              </a-form-item>
            </div>
          </a-collapse-item>
        </a-collapse>
      </a-form>
    </div>
  </CModal>
</template>
<style lang="less" scoped>
.content {
  :deep(.arco-collapse-item-content) {
    background-color: white;
  }
  :deep(.arco-collapse) {
    border: none;
  }
}
.title {
  font-size: 16px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(229, 230, 235, 1);
}
</style>
